<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				background: red;
				/* margin-bottom: 20px; */
			}
			.box2{
				background: green;
				/* margin-top: 20px; */
			}
			
			.box1 p{
				width: 100px;
				background: yellow;
				
			}
						
			.box2 p{
				width: 100px;
				background: blue;				
			}
			p{
				float: left;
			}
			.wall{
				clear: both;
				height: 30px;
			}
			/* .h20{
				height: 20px;
			} */
		</style>
	</head>
	<body>
		<!-- 
		清除浮动的第三种方式
		隔墙法：外墙法、内墙法		
		1、外墙法：
		1-1 在2个盒子之间添加一个额外的块级元素，
		1-2 给这个额外的块级元素添加clear: both;属性		
		
		注意点：
		外墙法它可以让第二个盒子使用margin-top属性		
		外墙法不可以让第一个盒子使用margin-bottom属性
		
		所以一般很少设置margin，通常都设置外墙的高度
		
		这个额外的盒子可以设置多个类名 第一个类名可以设置clear属性 第二个类名可以设置高度
		
		-->
		 <div class="box1">
		 	<p>我是段落1</p>
		 	<p>我是段落1</p>
		 	<p>我是段落1</p>
		 </div>
		 <div class="wall"></div>
		 <div class="box2">
		 	<p>我是段落2</p>
		 	<p>我是段落2</p>
		 	<p>我是段落2</p>
		 </div>
		 
		 
	</body>
</html>
